<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions" v-if="swiperList.length>0">
        <swiper-slide v-for="(item,index) in swiperList" :key="index">
          <img :src="item.img" @load="imgReady">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
  import {
    Swiper,
    SwiperSlide,
    directive
  } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    props:{
      swiperOptions: Object,
      swiperList: Array
    },
    components: {
      Swiper,
      SwiperSlide
    },
    directives: {
      swiper: directive
    },
    methods: {
      imgReady() {
        this.$emit('img-ready')
      }
    }
  }
</script>

<style>
  .swiper-slide img {
    width: 100%;
  }
</style>
